<template>
  <div class="app-container home">
    <el-row :gutter="20">
      <el-col :sm="24" :lg="12" style="padding-left: 20px">
        <div class="version">
          <img src="@/assets/images/version.png" alt="">
          <span style="font-weight: 500;">{{ platformData == null || platformData.versionType == "1" || platformData.versionType == null ? "试用版" : "正式版"}}</span>
          <span style="color: rgba(0, 0, 0, .5);" v-if="platformData != null && platformData.effectiveTime && platformData.versionType != null">{{ platformData.effectiveTime }} 到期</span>
          <div style="width: 40px;height: 100%;"></div>
          <div class="version-btn" style="margin-right: 16px;" v-if="platformData != null" @click="goRouter('b/platfromEquity')">
            <img src="@/assets/images/version-btn1.png" alt="">
            <span>立即续费</span>
          </div>
          <div class="version-btn" @click="goTarget('https://tb.53kf.com/code/client/bb6e2325e8f2435de273e8ef5ce483575/1')">
            <img src="@/assets/images/version-btn2.png" alt="">
            <span>联系客服</span>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24">
        <el-card body-style="padding: 0;" style="margin-bottom: 24px;">
          <div class="card" style="">
            <div class="card-title" style="font-size: large; font-weight: bold;">待办事项</div>
            <div class="card-content">
              <div>
                <div class="contract" @click="goRouter('cogo/contract-a', {'contractType': '进行中'})">
                  <div class="contract-num">{{ todoData.shareholderContractCount }}</div>
                  <div>待签署股东合同</div>
                </div>
                <div class="contract" @click="goRouter('staff/contract-b', {'contractType': '进行中'})">
                  <div class="contract-num">{{ todoData.staffContractCount }}</div>
                  <div>待签署员工合同</div>
                </div>
                <div class="contract" @click="goRouter('contract/contract-c', {'contractType': '进行中'})">
                  <div class="contract-num">{{ todoData.customerContractCount }}</div>
                  <div>待签署客户合同</div>
                </div>
              </div>
            </div>
            <div class="statisticsData">
              <div class="statisticsData-item">
                <img src="@/assets/images/statisticsData1.png" alt="">
                <div>
                  <div class="statisticsData-item-title">进行中合同数</div>
                  <div class="statisticsData-item-num">{{ statisticsData.progressContractCount }} <span>份</span></div>
                </div>
              </div>
              <div class="statisticsData-item">
                <img src="@/assets/images/statisticsData2.png" alt="">
                <div>
                  <div class="statisticsData-item-title">已签署合同数</div>
                  <div class="statisticsData-item-num">{{ statisticsData.acceptContractCount }} <span>份</span></div>
                </div>
              </div>
              <div class="statisticsData-item">
                <img src="@/assets/images/statisticsData3.png" alt="">
                <div>
                  <div class="statisticsData-item-title">剩余合同份数</div>
                  <div class="statisticsData-item-num">{{ statisticsData.remainingContractCount }} <span>份</span></div>
                </div>
              </div>
              <div class="statisticsData-item" style="border: none;">
                <img src="@/assets/images/statisticsData4.png" alt="">
                <div>
                  <div class="statisticsData-item-title">剩余短信数</div>
                  <div class="statisticsData-item-num">{{ statisticsData.remainingMessageCount }} <span>条</span></div>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24">
        <el-card body-style="padding: 0;" style="margin-bottom: 24px;">
          <div class="card" style="">
            <div class="card-title" style="font-size: large; font-weight: bold;">平台服务</div>
            <div class="customer-service">
              <div class="customer-service-item" @click="goTarget('https://tb.53kf.com/code/client/bb6e2325e8f2435de273e8ef5ce483575/1')">
                <img class="icon" src="@/assets/images/service1.png" alt="">
                <div class="title">咨询律师 <img src="@/assets/images/right.png" alt=""></div>
                <div class="subtitle">一段简单介绍字段</div>
              </div>
              <div class="customer-service-item" @click="goTarget('https://tb.53kf.com/code/client/bb6e2325e8f2435de273e8ef5ce483575/2')">
                <img class="icon" src="@/assets/images/service2.png" alt="">
                <div class="title">合同定制 <img src="@/assets/images/right.png" alt=""></div>
                <div class="subtitle">一段简单介绍字段</div>
              </div>
              <div class="customer-service-item" @click="goTarget('https://tb.53kf.com/code/client/bb6e2325e8f2435de273e8ef5ce483575/3')">
                <img class="icon" src="@/assets/images/service3.png" alt="">
                <div class="title">薪酬规划 <img src="@/assets/images/right.png" alt=""></div>
                <div class="subtitle">一段简单介绍字段</div>
              </div>
              <div class="customer-service-item" @click="goTarget('https://tb.53kf.com/code/client/bb6e2325e8f2435de273e8ef5ce483575/4')">
                <img class="icon" src="@/assets/images/service4.png" alt="">
                <div class="title">合同审查 <img src="@/assets/images/right.png" alt=""></div>
                <div class="subtitle">一段简单介绍字段</div>
              </div>
              <div class="customer-service-item" @click="goTarget('https://tb.53kf.com/code/client/bb6e2325e8f2435de273e8ef5ce483575/2')">
                <img class="icon" src="@/assets/images/service5.png" alt="">
                <div class="title">股权架构 <img src="@/assets/images/right.png" alt=""></div>
                <div class="subtitle">一段简单介绍字段</div>
              </div>
              <div class="customer-service-item" @click="goTarget('https://tb.53kf.com/code/client/bb6e2325e8f2435de273e8ef5ce483575/3')">
                <img class="icon" src="@/assets/images/service6.png" alt="">
                <div class="title">人员激励 <img src="@/assets/images/right.png" alt=""></div>
                <div class="subtitle">一段简单介绍字段</div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import store from '@/store';
import { getData } from '@/api';

export default {
  name: 'Index',
  data() {
    return {
      // 版本号
      version: '3.8.9',
      todoData: {
        shareholderContractCount: 0,
        staffContractCount: 0,
        customerContractCount: 0,
      },
      statisticsData: {
        progressContractCount: 0,
        acceptContractCount: 0,
        remainingContractCount: 0,
        remainingMessageCount: 0,
      },
      platformData: null,
    }
  },
  created() {
    this.loadPlatformData();
  },
  methods: {
    goTarget(href) {
      window.open(href, '_blank')
    },
    goRouter(path, query) {
      if (query === undefined) {
        query = {};
      }
      this.$router.push({path: path, query: query});
    },
    loadPlatformData() {
      this.platformData = store.getters.enterpriseInfo;
      if (this.platformData != null && this.platformData.versionType != null) {
        if (this.platformData.effectiveTime != null && (new Date(this.platformData.effectiveTime)).getTime() > (new Date()).getTime()) {
          this.loadData();
        } else {
          this.$router.push("b/platfromEquity");
        }
      } else {
        this.loadData();
      }
    },
    loadData() {
      getData({}).then(res => {
        if (!res) {
          return null;
        } else {
          this.statisticsData = res.statistics;
          this.todoData = res.todo;
        }
      })
    },
  }
}
</script>

<style scoped lang="scss">
.home {
  background: #F4F7F6;

  .version {
    width: max-content;
    display: flex;
    align-items: center;
    gap: 4px;
    height: 40px;
    background: #E1F8F5;
    border-radius: 20px;
    border: 1px solid #29C1BA;
    padding: 10px 16px;
    margin-bottom: 24px;
    img {
      display: block;
      width: 22px;
      height: 22px;
    }
    .version-btn {
      display: flex;
      align-items: center;
      gap: 4px;
      font-size: 14px;
      color: #138E88;
      cursor: pointer;
      img {
        display: block;
        width: 14px;
        height: 14px;
      }
    }
  }
  .card {
    background: #F9FDFD;
    padding: 24px 24px 68px;
    .card-title {
      height: 16px;
      line-height: 16px;
      font-weight: 500;
      font-size: 14px;
      color: #001529;
      padding-left: 8px;
      border-left: 4px solid #29C1BA;
      margin-bottom: 24px;
    }
    .card-content {
      padding-left: 40px;
      margin-bottom: 16px;
      .contract {
        cursor: pointer;
        display: inline-block;
        font-weight: 400;
        font-size: 14px;
        color: rgba(0,0,0,0.85);
        margin-right: 40px;
        .contract-num {
          font-weight: bold;
          font-size: 18px;
          color: #FEAD54;
        }
      }
    }
    .statisticsData {
      width: calc(100% - 80px);
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-around;
      height: 166px;
      background: #FFFFFF;
      box-shadow: 3px 0px 6px -4px rgba(0,0,0,0.12), 6px 0px 16px 0px rgba(80,122,103,0.08), 9px 0px 28px 8px rgba(179,234,198,0.05);
      border-radius: 8px;
      .statisticsData-item {
        flex: 1;
        display: flex;
        gap: 24px;
        align-items: center;
        justify-content: center;
        border-right: 4px solid #F4F7F6;
        img {
          display: block;
          width: 90px;
          height: 90px;
        }
        .statisticsData-item-title {
          font-weight: 500;
          font-size: 16px;
          color: rgba(0,0,0,0.85);
          margin-bottom: 8px;
        }
        .statisticsData-item-num {
          font-weight: bold;
          font-size: 32px;
          color: #138E88;
          span {
            font-weight: 400;
            font-size: 16px;
            color: #138E88;
            margin-left: 8px;
          }
        }
      }
    }
    .customer-service {
      width: calc(100% - 80px);
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 40px 40px;
      .customer-service-item {
        cursor: pointer;
        width: 100%;
        height: 166px;
        background: #FFFFFF;
        box-shadow: 3px 0px 6px -4px rgba(0,0,0,0.12), 6px 0px 16px 0px rgba(80,122,103,0.08), 9px 0px 28px 8px rgba(179,234,198,0.05);
        border-radius: 8px;
        position: relative;
        padding: 56px 0 0 56px;
        .icon {
          position: absolute;
          right: 0;
          bottom: 0;
          width: 156px;
          height: 148px;
        }
        .title {
          font-weight: 500;
          font-size: 16px;
          color: rgba(0,0,0,0.85);
          display: flex;
          gap: 4px;
          margin-bottom: 12px;
          img {
            display: block;
            width: 20px;
            height: 20px;
          }
        }
        .subtitle {
          font-size: 14px;
          color: rgba(0,0,0,0.25);
        }
      }
    }
  }
}
</style>

